<template>
  <div>
    <div class="content_box">
      <div class="text_content" v-for="(item,key) in textList" :style="{top: item.top, left:item.left,width:item.width}" :key="key+'a'">
        <div class="top_text">{{item.topText}}</div>
        <div class="botton_text">{{item.time}}</div>
      </div>
      <div class="text_content" v-for="(item,key) in timeList" :style="{top: item.top, left: item.left}" :key="key+'b'">
        <div class="botton_text">{{item.time}}</div>
        <div class="top_text">{{item.topText}}</div>
      </div>
      <div class="line_icon" 

      ></div>
      <div class="line_three"></div>

        <div
          class="x_line" v-for="(item,key) in xLineList" :key="key+'c'"
          :style="{width: item.width, left: item.left, background: item.background}"
        >
          <div class="x_line_active"></div>
        </div>


      <div class="y_lind" v-for="(item,key) in yLineList" :key="key+'d'" :style="{height: item.height, top: item.top, left: item.left}">
        <div :class="item.className"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "History",
  data(){
    return{
      yLineList:[{height:'3.046875vw',top:'30.833333333333336vw',left:'12.473958333333334vw',className:'y_active'},{height:'3.046875vw',top:'27.291666666666664vw',left:'19.322916666666668vw',className:'y_un_active'},
      {height:'9.921875vw',top:'30.833333333333336vw',left:'25.546875000000004vw',className:'y_active'},{height:'9.375vw',top:'20.963541666666664vw',left:'32.916666666666664vw',className:'y_un_active'},
      {height:'3.046875vw',top:'30.833333333333336vw',left:'40.598958333333336vw',className:'y_active'},{height:'3.046875vw',top:'27.291666666666664vw',left:'47.630208333333336vw',className:'y_un_active'},
      {height:'9.0625vw',top:'21.276041666666668vw',left:'61.38020833333333vw',className:'y_un_active'},{height:'3.046875vw',top:'30.833333333333336vw',left:'67.23958333333333vw',className:'y_active'},
      {height:'3.046875vw',top:'27.291666666666664vw',left:'75.33854166666667vw',className:'y_un_active'},{height:'9.947916666666666vw',top:'30.833333333333336vw',left:'78.72395833333333vw',className:'y_active'},
      {height:'15.703125000000002vw',top:'30.833333333333336vw',left:'87.99479166666667vw',className:'y_active'},{height:'8.59375vw',top:'21.744791666666664vw',left:'90.72916666666667vw',className:'y_un_active'}],
    
     xLineList:[{width:'5.208333333333334vw',left:'7.630208333333334vw',background:'#6f97f5'},
      {width:'7.369791666666667vw',left:'12.239583333333332vw',background:'#4fd0e1'},{width:'6.770833333333333vw',left:'19.010416666666664vw',background:'#4f56e1'},
      {width:'7.994791666666666vw',left:'25.286458333333332vw',background:'#ac4fe1'},{width:'8.229166666666666vw',left:'32.526041666666664vw',background:'#4f67e1'},
      {width:'7.682291666666667vw',left:'40.234375vw',background:'#4fafe1'},{width:'14.166666666666666vw',left:'47.317708333333336vw',background:'#4f67e1'},
      {width:'6.796874999999999vw',left:'60.729166666666664vw',background:'#74c1a7'},{width:'8.776041666666666vw',left:'66.875vw',background:' #4fafe1'},
      {width:'4.010416666666667vw',left:'74.94791666666667vw',background:'#686bf9'},{width:'9.505208333333332vw',left:'78.59375vw',background:'#28a1ff'},
      {width:'3.046875vw',left:'87.44791666666667vw',background:'#443bdb'},{width:'9.973958333333334vw',left:'90.02604166666667vw',background:'#4f67e1'}],
    
      textList:[{topText:'荣获恒生电子Pre-A轮融资1000万',time:'2016年8月',top:'23.515625vw',left:'13.4375vw',width:'auto'},
      {topText:'拿到国家高新技术企业年份',time:'2018年',top:'16.484375vw',left:'28.229166666666668vw',width:'auto'},
      {topText:'获同创伟业融资5000万A轮融资',time:'2020年5月',top:'23.515625vw',left:'42.265625vw',width:'auto'},
      {topText:'服务头部金融机构累计超10000亿的业务规模；服务的消费分期业务规模超6000亿/年',time:'截止2020年底',top:'16.25vw',left:' 52.994791666666664vw',width:'16.25vw'},
      {topText:'今年融器、产业互联中台正式上线',time:'2021年2月',top:'21.276041666666668vw',left:'70.02604166666667vw',width:'10.182291666666666vw'},
      {topText:'被评为准独角兽企业',time:'2021年4月',top:'16.979166666666668vw',left:'86.97916666666666vw',width:'auto'}
     ],
     
     timeList:[ {topText:'与工商银行正式开展合作',time:'2015年9月',top:'34.50520833333333vw',left:'8.151041666666666vw',width:'auto'},
      {topText:'与中国银行正式开展合作',time:'2017年11月',top:'41.302083333333336vw',left:'20.729166666666668vw',width:'auto'},
      {topText:'与中国农业银行正式开展合作',time:'2019年9月',top:'35.02604166666667vw',left:'35.520833333333336vw',width:'auto'},
      {topText:'与中国农业银行正式开展合作',time:'2021年2月',top:'35.02604166666667vw',left:'62.135416666666664vw',width:'auto'},
      {topText:'同创伟业亿元B轮融资',time:'2021年3月',top:'40.78125vw',left:'75.078125vw',width:'auto'},
      {topText:'获得小米顺为资本3000万B+轮融资',time:'2021年4月',top:'46.536458333333336vw',left:'81.61458333333333vw',width:'auto'},
      {topText:'',time:'',top:'',left:'',width:'auto'},
      {topText:'',time:'',top:'',left:'',width:'auto'}]
    }
  }
};
</script>

<style>
.text_content {
  text-align: center;
  position: absolute;
}

.top_text {
  font-size: 0.78125vw;
  font-family: FZLTZHK--GBK1-0, FZLTZHK--GBK1;
  font-weight: normal;
  color: #fff;
  margin-bottom: 0.5208333333333333vw;
}

.botton_text {
  font-size: 1.0416666666666665vw;
  font-family: HYRuiHuSongW;
  color: #fff;
  margin-bottom:0.5208333333333333vw;
}

.line_icon {
  width: 2.03125vw;
  height: 2.03125vw;
  border: 0.26041666666666663vw solid #289bc6;
  border-radius: 50%;
  position: absolute;
  top: 29.557291666666668vw;
  left: 4.010416666666667vw;
  opacity: 1;
  transition: all .5s;
  cursor: pointer;
}

.line_icon:hover{
  width: 2.03125vw;
  height: 2.03125vw;
  border: 0.26041666666666663vw solid #a2d7eb;
  border-radius: 50%;
  position: absolute;
  top: 29.557291666666668vw;
  left: 4.010416666666667vw;
  opacity: 1;
  transition: all .5s;
}

.line_icon:active{
    width: 4.03125vw;
    height: 4.03125vw;
    border: 0.26041666666666663vw solid #289bc6;
    border-radius: 50%;
    position: absolute;
    top: 28.557292vw;
    left: 2.010417vw;
    opacity: 0;
    transition: all .5s;
    cursor: pointer;
}

.line_three {
  position: absolute;
  border: 0.78125vw solid;
  border-color: rgba(0, 6, 58, 0) rgba(0, 6, 58, 0) rgba(0, 6, 58, 0) #4f6cb9;
  top: 29.895833333333332vw;
  left: 6.328125vw;
}

/* .x_line_box {
            position: absolute;
            top: 30.312499999999996vw;
            left: 7.630208333333334vw;
            height: 0.5208333333333333vw;
            width: 3547px;
            background: #6F97F5;
            border-radius: 0.26041666666666663vw;
            overflow: hidden;
        } */
.x_line {
  height: 0.5208333333333333vw;
  border-radius: 0.26041666666666663vw;
  position: absolute;
  top: 30.312499999999996vw;
  overflow: hidden;
}

.x_line_active {
  width: 100%;
  height: 100%;
  background: #fff;
  position: relative;
  left: 0;
  animation-name: x_active;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  border-radius: 0.26041666666666663vw;
}

@keyframes x_active {
  0% {
    left: 0;
  }

  50% {
    left: 100%;
  }

  100% {
    left: 100%;
  }
}

.y_lind {
  position: absolute;
  width: 0.052083333333333336vw;
  background: #5dc5ee;
  overflow: hidden;
}

.y_active {
  width: 100%;
  height: 100%;
  background: #fff;
  position: relative;
  bottom: 100%;
  animation-name: active;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

.y_un_active {
  width: 100%;
  height: 100%;
  background: #fff;
  position: relative;
  bottom: -100%;
  animation-name: un_active;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

@keyframes un_active {
  0% {
    bottom: -100%;
  }

  50% {
    bottom: 0;
  }

  100% {
    bottom: 100%;
  }
}

@keyframes active {
  0% {
    bottom: 100%;
  }

  50% {
    bottom: 0;
  }

  100% {
    bottom: -100%;
  }
}
</style>